<template>
  <el-upload
    :disabled="disabled"
    class="avatar-uploader"
    :action="url"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="value" :style="customStyle" :src="value">
    <el-button v-else :style="customStyle" icon="el-icon-plus"></el-button>
  </el-upload>
</template>
<script>
  export default {
    name: "CyFileUpload",
    props:{
      // 绑定值
      value: {
        type: String
      },
      // 请求地址
      url:{
        type:String,
        default:'/jic-live-web/api/v1/file/doUploadFile'
      },
      disabled:{
        type:Boolean,
        default: false
      },
      customStyle:{
        type: Object,
        default: {
          width: '180px',
          height: '120px',
          marginBottom: '10px'
        }
      },
      beforeUpload:{ // 上传前校验
        type:Object,
        default: ()=> function (file) {
          return true;
        }
      }
    },
    watch: { // 监听数据变化
      'tableData': function(newVal,oldVal){
        this.content = newVal
      }
    },
    data () {
      return {
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.$emit('onSuccess', res,file)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'||'image/png';
        const isLt2M = file.size / 1024 / 1024 < 3;
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 3MB!');
        }
        return isJPG && isLt2M && this.beforeUpload(file);
      }
    },
    mounted() {
      this.refreshPageRequest(1);
    }
  }
</script>
